import React, { useEffect } from 'react'
import { getHospDetailAsync, useSelectorHosp } from '@/store/slice/hosp'
import { useLocation, useNavigate, useParams } from 'react-router-dom'
import { useAppDispatch } from '@/hooks'
import { Button, Card, Descriptions, Space } from 'antd'
import { removePanesByKey, updatePanes } from '@/store/slice/siderCommon'

function HospitalDetail() {
    const dispatch = useAppDispatch()
    const pathname = useLocation().pathname
    const { id } = useParams() // 获取路由参数
    const { hospDetail } = useSelectorHosp()
    const navigate = useNavigate()

    useEffect(() => {
        dispatch(getHospDetailAsync(id as string))
        dispatch(updatePanes({ key: pathname, title: hospDetail.hospital.hosname + '医院详情' }))
    }, [hospDetail])
    return (
        <Space
            direction={'vertical'} // 垂直排列
        >
            <Button
                danger
                type={'primary'}
                onClick={() => {
                    // 返回医院列表
                    navigate('/hospital/hospitalList')
                    // 关闭当前标签页
                    dispatch(removePanesByKey(pathname))
                }}
            >
                返回
            </Button>
            <Card>
                <Descriptions column={2} title="医院基本信息" bordered>
                    <Descriptions.Item label="医院名称" style={{ whiteSpace: 'nowrap' }}>
                        {hospDetail.hospital.hosname}
                    </Descriptions.Item>
                    <Descriptions.Item label="医院LOGO">
                        {hospDetail.hospital.logoData && (
                            <img width={100} src={'data:image/png;base64,' + hospDetail.hospital.logoData} alt="" />
                        )}
                    </Descriptions.Item>
                    <Descriptions.Item label="医院编码">{hospDetail.hospital.hoscode}</Descriptions.Item>
                    <Descriptions.Item label="医院地址">{hospDetail.hospital.param.fullAddress}</Descriptions.Item>
                    <Descriptions.Item label="乘车路线" span={2}>
                        {hospDetail.hospital.route}
                    </Descriptions.Item>
                    <Descriptions.Item label="医院介绍" span={2}>
                        {hospDetail.hospital.intro}
                    </Descriptions.Item>
                </Descriptions>
            </Card>

            <Card>
                <Descriptions column={2} title="医院预约规则信息" bordered>
                    <Descriptions.Item label="预约周期">{hospDetail.bookingRule.cycle}</Descriptions.Item>
                    <Descriptions.Item label="发号时间">{hospDetail.bookingRule.releaseTime}</Descriptions.Item>
                    <Descriptions.Item label="停号时间">{hospDetail.bookingRule.stopTime}</Descriptions.Item>
                    <Descriptions.Item label="退号时间">{hospDetail.bookingRule.quitTime}</Descriptions.Item>
                    <Descriptions.Item label="预约规则" span={2}>
                        {hospDetail.bookingRule.rule.map((v: any, index: number) => (
                            <p key={index}>{v}</p>
                        ))}
                    </Descriptions.Item>
                </Descriptions>
            </Card>
        </Space>
    )
}

export default HospitalDetail
